<template>
  <view class="content">
    <!-- 使用 v-bind 或简写 : 来绑定响应式数据到 src 属性 -->
    <image class="logo" :src="uu" @click="clickImg"></image>
  </view>
</template>

<script setup>
import { ref } from 'vue';
// 使用 ref 来创建一个响应式引用，存储图片路径
const uu = ref("../../static/unpaid/unpaid.png");

// 定义一个预览图片的方法
const clickImg = () => {
  uni.previewImage({
    urls: [uu.value], // 传递图片链接数组，这里使用 uu.value 来确保传递的是字符串
    current: uu.value, // 设置当前预览的图片链接，同样使用 uu.value
    success: (res) => {
      console.log('Preview success:', res);
    },
    fail: (res) => {
      console.error('Preview failed:', res);
    },
    complete: (res) => {
      console.log('Preview completed:', res);
    },
  });
};
</script>

<style scoped>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.logo {
  width: 100px;
  height: 100px;
}
</style>